<script setup name="teacher">
import { ref, shallowRef, toRaw, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { ElTable, ElTableColumn, ElPagination, ElSelect, ElOption, ElDialog, ElMessage } from 'element-plus';
import { Search, Plus, Document } from '@element-plus/icons-vue';

import service from '@/utils/request';

const router = useRouter();

const uploadUrl = ref('http://192.168.116.86:8080/superadmin/teacher/upload');
const uploadHeaders = ref({
    Authorization: 'Bearer ' + localStorage.getItem('token'),
});

// 表格数据相关
const tableData = ref([]);
const pageNum = shallowRef(1);
const pageSize = shallowRef(5);
const totalSize = shallowRef(0);
const selectable = (row) => row.state === "启用";

// 搜索框相关
const searchValue = shallowRef('');
const searchRef = shallowRef(null);

// 对话框显示相关
const isShowAddTeacher = ref(false);
const isShowImport = ref(false);
const isShowResetPassword = ref(false);

// 新建管理员对话框数据
const addTeacherData = ref({
    name: '',
    jobId: '',
    department: '',
    password: '',
});
// 添加密码相关响应式数据
const newPassword = shallowRef('');
const errObj = ref({
    oldPasswordErr: "",
    newPasswordErr: "",
    confirmPasswordErr: "",
});

// 重置密码对话框数据
const resetPasswordData = ref({
    id: '',
    password: '',
});

// 批量导出的数据
const selectedExportData = ref([]);

// 表格数据处理
const fixedTableData = (list) => {
    if(!list) return [];
    return list.map((item) => ({
        name: item.username,
        jobId: item.id,
        department: item.school,
        state: item.state,
        operation: {
            resetPassword: "重置密码",
            edit: "编辑",
            changeState: item.state === "启用" ? "停用" : "启用"
        },
    }));
};

const getTableData = (searchKey) => {
    service({
        method: "get",
        url: "/superadmin/teacher/select",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: {
            condition: searchKey,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).then((res) => {
        //console.log(res);
        tableData.value = fixedTableData(res.data.list);
        totalSize.value = res.data.total || 0;
    }).catch((error) => {
        ElMessage({
            message: '获取数据失败',
            type: 'error',
        });
        tableData.value = [];
        totalSize.value = 0;
    });
};


// 添加密码验证方法
const newPasswordInput = () => {
  if (newPassword.value === '') {
    errObj.value.newPasswordErr = '新密码不能为空';
    return;
  }
  errObj.value.newPasswordErr = '';
}

const confirmPasswordInput = (event) => {
  if(event.target.value === '') {
    errObj.value.confirmPasswordErr = '确认密码不能为空';
    return;
  }
  if(event.target.value !== newPassword.value) {
    errObj.value.confirmPasswordErr = '两次输入的密码不一致';
    return;
  }
  errObj.value.confirmPasswordErr = '';
}
// 搜索框相关事件
const searchFocus = () => {
    searchRef.value.classList.add('searchActive');
};

const searchBlur = () => {
    if (searchValue.value === '') {
        searchRef.value.classList.remove('searchActive');
    }
};

const searchChange = () => {
    getTableData(searchValue.value);
};

// 新建教师相关
const addTeacherClick = () => {
    for(let k in addTeacherData.value) {
        if(addTeacherData.value[k] === '') {
            ElMessage({
                message: '请填写完整信息',
                type: 'warning',
            });
            return;
        }
    }
    
    service({
        method: "post",
        url: "/superadmin/teacher/add",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            name: addTeacherData.value.name,
            id: addTeacherData.value.jobId,
            school: addTeacherData.value.department,
            password: addTeacherData.value.password
        }
    }).then((res) => {
        if(res.data.success) {
            isShowAddTeacher.value = false;
            // 清空数据
            Object.keys(addTeacherData.value).forEach(key => addTeacherData.value[key] = '');
            
            ElMessage({
                message: '添加成功',
                type: 'success',
            });
            getTableData(searchValue.value);
        } else {
            ElMessage({
                message: '添加失败 ' + res.data.errors[0].errorMessage,
                type: 'error',
            });
        }
    });
};

const cancelTeacherClick = () => {
    isShowAddTeacher.value = false;
    // 清空数据
    Object.keys(addTeacherData.value).forEach(key => addTeacherData.value[key] = '');
};

// 批量导入文件相关
const downloadModelClick = () => {
    const elink = document.createElement('a');
    elink.style.display = 'none';
    elink.href = "https://qzy-1342857676.cos.ap-guangzhou.myqcloud.com/批量导入导师模板.xlsx";
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
};

const fileImportSuccess = (res) => {
    if(res.data.success) {
        ElMessage({
            message: '导入成功',
            type: 'success',
        });
        getTableData('');
        isShowImport.value = false;        
    } else {
        ElMessage({
            message: '导入失败 ' + res.data.errors[0].errorMessage,
            type: 'error',
        });
    }
};

const fileImportError = (res) => {
    ElMessage({
        message: '导入失败',
        type: 'error',
    });
};

// 批量导出相关
const selectionChange = (data) => {
    selectedExportData.value = data.map((item) => item.jobId); 
};

const exportClick = () => {
    if(selectedExportData.value.length === 0) {
        ElMessage({
            message: '请选择成员',
            type: 'warning',
        });
        return;
    }
    
    service({
        method: "post",
        url: "/superadmin/teacher/export",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: toRaw(selectedExportData.value),
        responseType: 'blob'
    }).then((res) => {
        if(res.message == '服务器内部错误') {
            ElMessage({
                message: '导出失败',
                type: 'error',
            });
            return;
        }
        
        const blob = new Blob([res.data]);
        const fileName = '教师导出.xlsx';
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);

        ElMessage({
            message: '导出成功',
            type: 'success',
        });
    });
};

// 表格操作相关
const resetPasswordClick = (row) => {
    isShowResetPassword.value = true;
    resetPasswordData.value.id = row.id;
};

const resetPasswordSaveClick = (data) => {
    service({
        method: "post",
        url: "/superadmin/teacher/reset",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            id: resetPasswordData.value.id,
            password: data
        }
    }).then((res) => {
        if(res.message == '请求正常') {
            ElMessage({
                message: '重置成功',
                type: 'success',
            });
            isShowResetPassword.value = false;
        } else {
            ElMessage({
                message: '重置失败',
                type: 'error',
            });
        }
    });    
};

const editClick = (row) => {
    router.push({
        path: '/superAdministrator/teacher/teacherEdit',
        query: row
    });
};

const changeStateClick = (id, name) => {
    service({
        method: "get",
        url: "/superadmin/teacher/change",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: { id }
    }).then((res) => {
        if(res.message == '请求正常') {
            ElMessage({
                message: `修改${name}状态成功`,
                type: 'success',
            });
            getTableData(searchValue.value);
        } else {
            ElMessage({
                message: '修改失败',
                type: 'error',
            });
        }
    });
};

// 分页器相关事件
const handleSizeChange = (data) => {
    pageNum.value = data;
    getTableData(searchValue.value);
};

onMounted(() => {
    getTableData('');
});
</script>

<template>
    <!-- 重置密码 -->
    <div class="resetPassword">
            <el-dialog 
                draggable
                :model-value="isShowResetPassword" 
                width="35%" 
                top="30vh"
                :show-close="false"
                :open-delay="100"
                :close-on-click-modal="false"
            >
                <!-- 标题部分 -->
                <template #header>
                    <div class="dialogTitle">
                        <div class="line"></div>
                        <div>重置密码</div>
                    </div>
                </template>
                <!-- 内容部分 -->
                <template #default>
                    <div class="dialogContent">
                        <div class="newPassword">
                            <div class="title">
                                <span>新密码：</span>
                            </div>
                            <div class="inputPart">
                                <input 
                                    type="text" 
                                    v-model="newPassword"
                                    @keyup.enter="newPasswordInput"
                                    @blur="newPasswordInput"
                                >
                                <div class="err">{{ errObj.newPasswordErr }}</div>
                            </div>
                        </div>
                        <div class="confirmPassword">
                            <div class="title">
                                <span>确认密码：</span>
                            </div>
                            <div class="inputPart">
                                <input 
                                    type="text"
                                    @keyup.enter="confirmPasswordInput"
                                    @blur="confirmPasswordInput"
                                >
                                <div class="err">{{ errObj.confirmPasswordErr }}</div>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="save" @click="resetPasswordSaveClick(newPassword)">保存</div>
                            <div class="cancel" @click="isShowResetPassword = false">取消</div>
                        </div>
                    </div>
                </template>
            </el-dialog>        
    </div>
    
    <!-- 批量导入对话框 -->
    <el-dialog
        draggable
        :model-value="isShowImport"
        width="50%"
        top="20vh"
        @close="isShowImport = false"
        class="import-dialog"
    >
        <template #header>
            <div class="importHeader">批量导入</div>
        </template>
        <template #default>
            <div class="importContent">
                <div class="item">
                    <span>下载模板</span>
                    <el-icon size="100"><Document /></el-icon>
                    <span class="downloadBtn" @click="downloadModelClick">
                        <span>下载</span>
                        <span class="iconfont icon-daoru"></span>                         
                    </span>
                </div>
                <div class="item">
                    <span>导入文件</span>
                    <el-icon size="100"><Document /></el-icon>
                    <el-upload
                        :headers="uploadHeaders"
                        :action="uploadUrl"
                        :on-success="fileImportSuccess"
                        :on-error="fileImportError"
                        :show-file-list="false"
                    >
                        <span class="importBtn">导入</span>
                    </el-upload>
                </div>
            </div>
        </template>
    </el-dialog>
    
    <!-- 新建教师对话框 -->
    <el-dialog 
        draggable
        :model-value="isShowAddTeacher" 
        width="40%" 
        top="15vh" 
        destroy-on-close
        :close-on-click-modal="false"
        :show-close="false"
        class="create-teacher-dialog"
    >
        <template #header>
            <div class="createTeacherHeader">新建教师信息</div>
        </template>
        <template #default>
            <div class="createTeacherContent">
                <div class="item">
                    <span class="title">姓名</span>
                    <input type="text" placeholder="请输入" v-model="addTeacherData.name" class="form-input">
                </div>
                <div class="item">
                    <span class="title">工号</span>
                    <input type="text" placeholder="请输入" v-model="addTeacherData.jobId" class="form-input">
                </div>
                <div class="item">
                    <span class="title">学院</span>
                    <input type="text" placeholder="请输入" v-model="addTeacherData.department" class="form-input">
                </div>
                <div class="item">
                    <span class="title">初始密码</span>
                    <input type="text" placeholder="请输入" v-model="addTeacherData.password" class="form-input">
                </div>
            </div>
        </template>
        <template #footer>
            <div class="createTeacherFooter">
                <div class="cancel-btn" @click="cancelTeacherClick">取消</div>
                <div class="submit-btn" @click="addTeacherClick">添加</div>
            </div>
        </template>
    </el-dialog>
    
    <!-- 教师管理内容 -->
    <div class="teacher">
        <div class="header">
            <span>教师管理</span>
        </div>
        <div class="content">
            <div class="dataTable">
                <!-- 搜索框和操作按钮头部 -->
                <div class="tableHeader">
                    <div class="left">
                        <span>教师管理</span>
                    </div>
                    <div class="right">
                        <div class="search" ref="searchRef">
                            <input 
                                v-model.trim="searchValue" 
                                type="text" placeholder="搜索" 
                                @focus="searchFocus" 
                                @blur="searchBlur"
                                @change="searchChange"
                            />
                            <el-icon class="icon"><Search /></el-icon> 
                        </div>
                        <div class="createTeacher" @click="isShowAddTeacher = true">
                            <span>新建导师</span>
                            <el-icon><Plus /></el-icon>
                        </div>
                        <div class="importTeacher" @click="isShowImport = true">
                            <span>批量导入</span>
                            <span class="iconfont icon-daoru"></span>
                        </div>
                        <div class="exportTeacher" @click="exportClick">
                            <span>批量导出</span>
                            <span class="iconfont icon-export"></span>
                        </div>
                    </div>
                </div>
                
                <!-- 数据表格 -->
                <div class="tableContent">
                    <el-table 
                        :data="tableData"
                        row-key="jobId"
                        :style="{ width: '100%' }"
                        height="100%"
                        show-overflow-tooltip
                        empty-text="暂无数据"
                        :header-cell-style="{ color: '#000', background: '#f2f3f5' }"
                        @selection-change="selectionChange"
                    >
                        <el-table-column type="selection" width="55" :selectable="selectable" />
                        <el-table-column align="left" prop="name" label="姓名" width="150" />
                        <el-table-column align="center" prop="jobId" label="工号" width="150" />
                        <el-table-column align="left" prop="department" label="学院" />
                        <el-table-column align="center" prop="state" label="状态" width="150">
                            <template #default="scope">
                                <span :class="`state-${scope.row.state}`">{{ scope.row.state }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="operation" label="操作" width="200" fixed="right">
                            <template #default="scope">
                                <span class="operation-link" @click="resetPasswordClick(scope.row)">{{ scope.row.operation.resetPassword }}</span>
                                <span style="color:#e5e6eb;padding: 0 3px;">|</span>
                                <span class="operation-link" @click="editClick(scope.row)">{{ scope.row.operation.edit }}</span>
                                <span style="color:#e5e6eb;padding: 0 3px;">|</span>
                                <span class="operation-link" @click="changeStateClick(scope.row.jobId, scope.row.name)">{{ scope.row.operation.changeState }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
                <!-- 底部分页器 -->
                <div class="tableFooter">
                    <div class="left">
                        <div class="total">共计: {{ totalSize }} 条</div>
                    </div>
                    <div class="right">
                        <div class="pagination">
                            <el-pagination
                                layout="prev, pager, next"
                                :total="totalSize"
                                :page-size="pageSize"
                                background
                                size="small"
                                @current-change="handleSizeChange"
                            />
                        </div>
                        <div class="selector">
                            <el-select 
                                v-model="pageSize" 
                                placeholder="每页条数" 
                                style="width: 80px;"
                                size="small"
                                @change="getTableData(searchValue)"
                            >
                                <el-option label="5条/页" :value="5" selected />
                                <el-option label="10条/页" :value="10" />
                                <el-option label="20条/页" :value="20" />
                            </el-select>
                        </div>
                        <div class="jump">
                            <span class="title">前往:</span>
                            <input type="text" v-model="pageNum" @change="getTableData(searchValue)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "sass:color";
// 导入字体图标
@use "./fonticon/commonFonticon/iconfont.css";
// 颜色变量
$primary-color: #4c6fb4;
$danger-color: #eb5757;
$danger-hover: #ff6b6b;
$gray-color: #909399;
$gray-hover: #a0a2a5;
$bg-light: #f1f2f3;
$bg-lighter: #f2f3f5;
$border-color: #cacacb;
$text-primary: #000000;
$text-secondary: #86909c;
$text-tertiary: #8e96a0;
$success-color: #00af1d;
$inactive-color: #898989;
$enable-color: #96ce71;
$disable-color: #eb5757;

.resetPassword {
    .dialogTitle{
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 20px;
        font-weight: 500;
        .line{
            width: 4px;
            height:20px;
            border-radius: 2px;
            background-color: #2d5cf6;
        }
    }
    .dialogContent{
        margin-top: 30px;
        width: 100%;
        padding-left: 5px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        font-weight: 500;
        .newPassword, .confirmPassword{
            width: 100%;
            display: flex;
            align-items: center;
            .title{
                font-size: 16px;
                width: 90px;
                &::before{
                    content: '*';
                    color: $danger-color;
                }            
            }
            .inputPart{
                position: relative;
                input{
                    width: 15vw;
                    height: 3.5vh;
                    border: none;
                    border-radius: 5px;
                    background-color: $bg-lighter;
                    text-indent: 5px;
                    transition: all 0.3s ease;
                    &:focus{
                        outline: 2px solid $primary-color;
                        box-shadow: 0 0 5px rgba(76, 109, 180, 0.5);
                    }
                }
                .err{
                    position: absolute;
                    top: 3.5vh;
                    left: 0;
                    font-size: 10px;
                    color: $danger-color;
                }
            }
        }
        .footer{
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap:20px;
            font-weight: 400;
            font-size: 15px;
            .save{
                width: 5vw;
                height: 3.5vh;
                border-radius: 5px;
                background-color: $primary-color;
                text-align: center;
                line-height: 3.5vh;
                color:white;
                &:hover{
                    background-color: color.adjust($primary-color, $lightness: -5%);
                }
            }
            .cancel{
                width: 5vw;
                height: 3.5vh;
                border-radius: 5px;
                background-color: $bg-lighter;
                text-align: center;
                line-height: 3.5vh;
                color: $text-primary;
                &:hover{
                    background-color: color.adjust($bg-lighter, $lightness: -5%);
                }
            }
        }
    }
}
// 批量导入对话框
.import-dialog {
    .el-dialog__body {
        padding: 30px;
    }
}

.importHeader {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
}

.importContent {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    
    .item {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        .downloadBtn {
            width: 100px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 2px solid $primary-color;
            border-radius: 10px;
            color: $primary-color;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            
            &:hover {
                background-color: $primary-color;
                color: white;
            }
        }
        
        .importBtn {
            width: 70px;
            height: 30px;
            border-radius: 10px;
            background-color: $primary-color;
            color: white;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            
            &:hover {
                background-color: color.adjust($primary-color, $lightness: -5%);
            }
        }
    }
}

// 创建教师对话框
.create-teacher-dialog {
    .el-dialog__body {
        padding: 30px;
    }
}

.createTeacherHeader {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
}

.createTeacherContent {
    width: 100%;
    
    .item {
        width: 100%;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 20px;
        
        .title {
            width: 70px;
            text-align: right;
            font-size: 14px;
            font-weight: 500;
            color: $text-primary;
            position: relative;
            padding-right: 10px;
            
            &::after {
                content: "*";
                position: absolute;
                right: 0;
                color: $danger-color;
            }
        }
        
        .form-input {
            width: calc(60% - 70px);
            height: 40px;
            border: 1px solid $border-color;
            border-radius: 6px;
            padding: 0 12px;
            font-size: 14px;
            color: $text-primary;
            transition: all 0.3s ease;
            
            &:focus {
                border-color: $primary-color;
                box-shadow: 0 0 0 2px rgba(76, 109, 180, 0.2);
                outline: none;
            }
            
            &::placeholder {
                color: $text-secondary;
            }
        }
    }
}

.createTeacherFooter {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 20px;
    
    .cancel-btn, .submit-btn {
        width: 80px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .cancel-btn {
        background-color: $bg-lighter;
        color: $text-primary;
        
        &:hover {
            background-color: color.adjust($bg-lighter, $lightness: -5%);
        }
    }
    
    .submit-btn {
        background-color: $primary-color;
        color: white;
        
        &:hover {
            background-color: color.adjust($primary-color, $lightness: -5%);
        }
    }
}

// 教师管理主页面
.teacher {
    width: 100%;
    height: 100%;
    font-weight: 500;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        background-color: white;
        font-size: 23px;
        color: $text-primary;
    }
    .content {
        width: 100%;
        height: calc(100% - 60px);
        padding: 20px;
        background-color: $bg-light;
    }
    .dataTable {
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        .tableHeader {
            width: 100%;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid $border-color;
            
            .left {
                width: 200px;
                font-size: 20px;
                font-weight: 600;
                color: $text-primary;
            }
            
            .right {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .search {
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 20vw;
                    height: 4vh;
                    border-radius: 6px;
                    background-color: $bg-lighter;
                    transition: all 0.3s ease;
                    overflow: hidden;
                    
                    &:hover {
                        background-color: #e9ecef;
                    }
                    
                    &.searchActive {
                        outline: 2px solid $primary-color;
                        background-color: white;
                    }
                    input {
                        width: calc(100% - 40px);
                        height: 100%;
                        border: none;
                        outline: none;
                        background: transparent;
                        padding: 0 12px;
                        font-size: 14px;
                        color: $text-primary;
                    }
                    
                    .icon {
                        width: 40px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: $text-secondary;
                        cursor: pointer;
                    }
                }
                
                .createTeacher, .importTeacher, .exportTeacher {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    padding: 0 16px;
                    height: 36px;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                
                .createTeacher {
                    background-color: $primary-color;
                    color: white;
                    &:hover {
                    background-color: color.adjust($primary-color, $lightness: -5%);
                    box-shadow: 0 2px 8px color.adjust($primary-color, $alpha: 0.3);
                    }
                }
                
                .importTeacher, .exportTeacher {
                    border: 1px solid $primary-color;
                    color: $primary-color;
                    &:hover {
                    color: white;
                    background-color: color.adjust($primary-color, $alpha: 0.05);
                    border-color: color.adjust($primary-color, $lightness: -5%);
                    }
                }
            }
        }
        
        .tableContent {
            flex: 1;
            padding: 0 20px;
            overflow: hidden;
            
            .state-启用 {
                color: $enable-color;
                font-weight: 500;
            }
            
            .state-禁用 {
                color: $disable-color;
                font-weight: 500;
            }
            
            .operation-link {
                color: $primary-color;
                cursor: pointer;
                transition: color 0.2s ease;
                
                &:hover {
                    color: color.adjust($primary-color, $lightness: -10%);
                    text-decoration: underline;
                }
            }
        }
        
        .tableFooter {
            width: 100%;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid $border-color;
            
            .left {
                font-size: 14px;
                color: $text-secondary;
            }
            
            .right {
                display: flex;
                align-items: center;
                gap: 16px;
                
                .pagination {
                    .el-pagination {
                        margin: 0;
                    }
                }
                
                .selector {
                    .el-select {
                        font-size: 14px;
                    }
                }
                
                .jump {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    font-size: 14px;
                    color: $text-secondary;
                    
                    .title {
                        white-space: nowrap;
                    }
                    
                    input {
                        width: 50px;
                        height: 32px;
                        border: 1px solid $border-color;
                        border-radius: 4px;
                        text-align: center;
                        font-size: 14px;
                        transition: border-color 0.3s ease;
                        
                        &:focus {
                            border-color: $primary-color;
                            outline: none;
                        }
                    }
                }
            }
        }
    }
}
</style>